<template>
  <div id="order-detail-page" v-if="order.id>0" :style="{
    minHeight:(this.getWinSize().height-this.getSafeArea().top-80)+'px'
  }">
    <div class="page-title" :style="{top:(this.getSafeArea().top)+'px'}">
      <div id="back-button" @click="$router.push('/OrderList')">
        <i href="javascript:void(0)" class="el-icon-arrow-left"></i>
      </div>
      <span>订单详情</span>
    </div>

    <div class="shop-and-product-box"
         style="position: relative;"
        :style="{top:(this.getSafeArea().top-5)+'px'}">
      <div class="shop-info">
        <div class="shop-logo">
          <img :src="order.memberIcon"/>
        </div>
        <div class="shop-name" v-text="order.memberNickname"></div>
      </div>
      <product-list-item v-for="(product,index) in orderProductList" :order-status="order.status.id" :key="index"
                         :show-type="1" :curr-product="{
        orderProductId:product.id,
        id:product.productId,
        name:product.productName,
        image:product.productImage,
        model:product.productModel,
        nums:product.productNums,
        price:product.productPrice,
        applyType:product.applyType,
        applyStatus:product.applyStatus,
        applyId:product.applyId,
      }"/>
      <div class="c"></div>
    </div>

    <!--物流信息-->
    <div class="express-info"
         style="position: relative;"
         v-if="order.status.id>0 && orderExpress && orderExpress.content" @click="$router.push({
    name:'OrderExpress',
    query:{
      id:orderExpress.id
    }
    })">
      <div class="icon-box">
        <i class="iconfont icon-huoche"></i>
      </div>
      <div class="item">
        <div class="status-box">
          <div class="tag-name">
            物流状态: <span v-text="orderExpress.content[0].tagName"></span>
          </div>
          <div class="time"> {{ orderExpress.content[0].createdAt }}</div>
        </div>
        <div class="info-box">
          <div class="info ovd_s">
            {{ orderExpress.content[0].content }}
          </div>
        </div>
      </div>
      <div class="c"></div>
    </div>

    <!--收货地址信息-->
    <div class="address-box"
         style="position: relative; width: 96%; margin: 5px auto;"
         v-if="order.id>0 && order.sendType.id!==2">
      <address-item :addressData="orderAddress" :show-type="3" :is-re-choose="false"/>
      <div class="bottom-bar"></div>
    </div>

    <!--订单信息-->
    <div class="order-info"
         style="position: relative;">
      <div class="title">订单信息</div>
      <div class="row">
        <div class="name">订单编号:</div>
        <div class="value" v-text="order.orderNo"></div>
      </div>
      <div class="row">
        <div class="name">订单状态:</div>
        <div class="value">
          <el-tag type="success" style="text-indent: 0px;" v-text="order.status.name"></el-tag>
        </div>
      </div>
      <div class="row">
        <div class="name">商品价格:</div>
        <div class="value">
          <span class="red b" v-text="'￥' + ToMoney(order.productPrice)"></span>
        </div>
      </div>
      <div class="row" v-if="order.expressPrice>0">
        <div class="name">配送费用:</div>
        <div class="value">
          <span class="red b" v-text="'￥' + ToMoney(order.expressPrice)"></span>
        </div>
      </div>
      <div class="row" v-if="order.couponPrice>0">
        <div class="name">优惠券:</div>
        <div class="value">
          <span class="red b" v-text="'-' + ToMoney(order.couponPrice)"></span>
        </div>
      </div>
      <div class="row" v-if="order.vipDiscountPrice>0">
        <div class="name">Vip优惠:</div>
        <div class="value">
          <span class="red b" v-text="'-' + ToMoney(order.vipDiscountPrice)"></span>
        </div>
      </div>
      <div class="row" v-if="order.fullMinusPrice>0">
        <div class="name">店铺满减:</div>
        <div class="value">
          <span class="red b" v-text="'-' + ToMoney(order.fullMinusPrice)"></span>
        </div>
      </div>
      <div class="row" v-if="order.shopDiscountPrice>0">
        <div class="name">店铺特殊优惠:</div>
        <div class="value">
          <span class="red b" v-text="'-' + ToMoney(order.shopDiscountPrice)"></span>
        </div>
      </div>
      <div class="row">
        <div class="name">实际价格:</div>
        <div class="value">
          <span class="red b" v-text="'￥' + ToMoney(order.price)"></span>
        </div>
      </div>
      <div class="row">
        <div class="name">配送方式:</div>
        <div class="value"  v-if="order.sendType.id===2">
          {{ order.sendType.name }}
        </div>

        <div class="value"  v-if="order.sendType.id===1">
          {{ order.sendType.name }}
          (送达时间: <span style="display: inline;" class="red b">{{order.sendTime}}</span> )
        </div>

        <div class="value" v-if="order.sendType.id===0">
          {{ order.sendType.name }}
        </div>
      </div>
      <div class="row">
        <div class="name">支付方式:</div>
        <div class="value">
          <span v-if="order.payTime">{{ order.payType.name }}</span>
          <span style="color: #e3ba8f" v-if="!order.payTime">未支付</span>
        </div>
      </div>
      <div class="row">
        <div class="name">当前状态:</div>
        <div class="value"> {{ order.status.name }}</div>
      </div>
      <div class="row">
        <div class="name">是否带发票:</div>
        <div class="value" style="text-indent: 0px">
          <span>{{ order.isInvoice.name }}</span>
          <el-tag v-if="order.isInvoice.id===1 && order.invoiceFileUrl && order.invoiceFileUrl.length>0" type="success" @click="showInvoiceFile()">查看发票</el-tag>
          <el-tag v-if="order.isInvoice.id===1 && !order.invoiceFileUrl" type="warning">未上传</el-tag>
        </div>
      </div>
      <div class="row">
        <div class="name">备注信息:</div>
        <div class="value"> {{ order.info }}</div>
      </div>
      <div class="row">
        <div class="name">下单时间:</div>
        <div class="value"> {{ order.createdAt }}</div>
      </div>
    </div>

      <order-act-button  :call-back="getDetail" v-if="order.id>0" :curr-order="order"/>
  </div>
</template>

<script>
import AddressItem from '../common/AddressItem'
import ProductListItem from '../common/ProductListItem'
import OrderActButton from '../common/OrderActButton'

export default {
  name: 'OrderDetail',
  components: {OrderActButton, ProductListItem, AddressItem},

  mounted () {
    this.bus.$emit('OpenOrderMessageCallBus','Order_'+this.$route.query.id)
    this.getDetail()
  },
  data: function () {
    return {
      'orderAddress': {},
      'orderExpress': {},
      'allExpressList': {},
      'orderProductList': [],
      'order': {}
    }
  },
  watch:{
    $route:function () {
      this.order={}
      this.orderProductList=[]
      this.allExpressList={}
      this.orderExpress={}
      this.orderAddress={}
      this.getDetail()

      this.bus.$emit('OpenOrderMessageCallBus','Order_'+this.$route.query.id)
    }
  },
  methods: {
    showInvoiceFile:function () {
      if (typeof api!=='undefined'){
        var pdfReader = api.require('pdfReader');
        pdfReader.open({
          path: this.order.invoiceFileUrl,
          hidden:{
            print: true,
            export: true,
            bookmark: true,
            email: true
          }
        });
      }else{
        console.log(this.order.invoiceFileUrl)
         window.open(this.order.invoiceFileUrl, "发票查看", 'height=500, width=800, top=100, left=100, toolbar=no, menubar=no,scrollbars=no,resizable=no, location=no, status=no');
      }

    },
    getDetail: function () {
      let $this = this
      let form = {}
      if ($this.$route.query.orderNo) {
        form.orderNo = $this.$route.query.orderNo
      } else {
        form.id = $this.$route.query.id
      }
      $this.MyRequest($this.ApiDoNameShop + 'Order/getDetail', form, function (data) {
        $this.order = data.order
        $this.orderAddress = data.orderAddress
        if (data.orderExpress && data.orderExpress.content) {
          data.orderExpress.content = data.orderExpress.content.reverse()
        }
        $this.orderExpress = data.orderExpress
        $this.orderProductList = data.orderProductList
        $this.$forceUpdate()
      }, function (msg) {
        $this.$message.error(msg)
      })
    },
    // 售后(退换货)
    apply:function (item) {
      this.$router.push({
        name:'OrderApply',
        query:{
          id:item.id
        }
      })
    },
    pay:function (order) {
      let $this=this
      this.bus.$emit('ChooseOrderPayTypeDialogCallBus',order,function () {
        $this.getDetail()
      })
    },
    // 订单操作: 取消订单,确认收货
    act: function (id, act) {
      let $this = this
      var actRequest = function (act, reason) {
        var form = {id: id, status: act}
        if (act === 5) {
          form.cancelReason = reason
        }
        $this.myLoading = true
        $this.MyRequest($this.ApiDoNameShop + 'Order/act', form, function (data) {
          $this.myLoading = false
          $this.getOrderList()
          $this.$forceUpdate()
        }, function (msg) {
          $this.myLoading = false
          $this.$message.error(msg)
        })
      }

      if (act === 5) {
        $this.$prompt('请输入 取消原因', '系统提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputErrorMessage: '取消原因错误格式不正确'
        }).then(({value}) => {
          if (value.length < 5) {
            return $this.successTip('取消原因必须于5个字符')
          }
          actRequest(act, value)
        })
      } else {
        $this.$confirm('您确认要进行该操作吗, 是否继续?', '系统提示', {
          customClass: 'my-confirm-box',
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          backType: 'warning'
        }).then(() => {
          actRequest(act)
        }).catch(() => {

        })
      }

    },
    // 订单评价
    reply: function (id, type) {
      var query = {
        id: id
      }
      if (type) {
        query.type = type
      }
      this.$router.push({
        name: 'OrderReply',
        query: query
      })
    }
  }
}
</script>

<style scoped>

</style>
